<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医生坐诊信息</title>

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form :inline="true" :model="doctor" class="demo-form-inline">
            <el-form-item label="医生姓名">
                <el-input v-model="doctor.doctorName" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>


        <template>
            <el-table
                    :data="doctorSits"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="doctorName"
                            label="医生姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="dayOfWeek"
                            label="星期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="amorPM"
                            label="上/下午"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="remainNum"
                            label="余量"
                            width="180">
                    </el-table-column>

            </el-table>
        </template>

    </div>

    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios-0.18.0.js"></script>

    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    doctorSits: [],
                    doctor: {
                        doctorName: '',
                    }
                }
            },
            methods:{
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },
                onSubmit() {
                    this.selectDoctorSit();
                },
                selectDoctorSit() {
                    axios.get("http://localhost:8080/doctorSit/selectDocSitName?doctorName="+this.doctor.doctorName).then(resp=>{
                        this.doctorSits = resp.data;
                    })
                }
            },
            mounted(){
                this.selectDoctorSit();
            }
        })
    </script>


</body>
</html>